.friends-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .friends-list {
        margin: 10px;
        padding: 10px;
        width: 100vw;
        height: auto;
        min-width: 200px;
        max-width: 1000px;
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        display: flex;
        flex-direction: row;
        padding: 24px;

        @include respond(xl) {
            width: 48%;
        }

        @include respond(md) {
            width: 47%;
        }

        .friend-avatar {
            margin: auto 0px;

            .friend-avatar-img {
                width: 64px;
                height: 64px;
                border-radius: 50%;
                object-fit: fill;
            }
        }

        .friend-info {
            float: right;
            margin-left: 16px;

            @include respond(xl) {
                width: 24vw
            }

            .friend-name {
                font-size: 2.0rem;
                font-weight: 500;
            }

            .friend-desc {
                max-width: 100%;
                word-wrap: break-word;
            }
        }

        &:hover {
            box-shadow: var(--shadow-l2);
            transition: box-shadow 0.5s;
            -webkit-transition: box-shadow 0.5s;
        }
    }
}